<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>后台服务管理平台</title>

        <script src="https://unpkg.com/vue@3"></script>
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
        <!--图标-->
        <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-plus"></script>

        <script src="../res_js/axios-0.18.0.js"></script>
        <script src="../res_js/jquery-3.7.0.min.js"></script>

        <link rel="stylesheet" href="index.css">
    </head>
    <body style="margin: 0;">
        <div id="app">
            <el-container>
                <el-header style="padding: 0; height: 5vh">
                    <div class="header">
                        <div class="header-block-left">后台服务平台</div>
                        <div class="header-block-right">编号：{{id}}</div>
                    </div>
                </el-header>
                <el-main style="padding: 0">
                    <el-tabs type="border-card" tab-position="left" @tab-click="handleClick" style="height: 94.8vh;">
                        <el-tab-pane label="蓝标审核">Task</el-tab-pane>
                        <el-tab-pane label="视频审核">
                            <el-card class="box-card">
                                <table style="width: 100%;">
                                    <tr>
                                        <td colspan="1"><h1>黑马程序员 - 课程介绍</h1></td>
                                        <td><div style="float: right;"><el-tag class="ml-2">发布</el-tag><el-tag class="ml-2" type="warning">修改</el-tag></div></td>
                                    </tr>
                                    <tr align="center">
                                        <td rowspan="2" style="width: 60%">
                                            <video style="width: 100%" src="../video/01-课程导学.mp4" controls></video>
                                        </td>
                                        <td style="height: 50%"><video style="width: 80%" src="../video/01-课程导学.mp4"></video></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            asdsadasd<p>sadsadasdad<p>asdasdasdasdas</p>
                                        </td>
                                    </tr>
                                </table>
                            </el-card>
                            <div style="margin-top: 1vh; margin-bottom: 0">
                                <el-button type="success" round>通过</el-button>
                                <el-button type="danger" round>不通过</el-button>
                                <el-button type="primary" round style="float: right">下一个</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="文章审核">
                            <table>
                                <tr>
                                    <td style="width: 60%;">
                                        <h1>标题</h1>
                                        <div style="margin: 2% 4% 2% 2%; white-space:normal; word-break:break-all;overflow:hidden;">
                                            asdbukfuyfftfcvytglvcbabaeiuwdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddvlbhasd
                                        </div>
                                    </td>
                                    <td>
                                        <el-card style="height: 81vh;">
                                            <video style="width: 80%" src="../video/01-课程导学.mp4"></video>
                                            <div style="margin-top: 1%; white-space:normal; word-break:break-all;overflow:hidden;">
                                                asdbukfuyfftfcvytglvcbabaeiuwdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddvlbhasd
                                            </div>
                                        </el-card>
                                    </td>
                                </tr>
                            </table>
                            <div style="margin-top: 2%;">
                                <el-button type="success" round>通过</el-button>
                                <el-button type="danger" round>不通过</el-button>
                                <el-button type="primary" round style="float: right">下一个</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="商铺审核">Role</el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </div>
        <script src="index.js"></script>
    </body>
</html>